<template>
  <div>
    <!-- 输入框展示客户名称 -->
    <el-input v-model="customerName" readonly @click="openDialog" placeholder="请选择客户" style="width: 240px;">
      <template #append>
        <el-button icon="Close" @click.stop="clearCustomer" />
      </template>
    </el-input>

    <!-- 弹窗 -->
    <el-dialog title="选择客户" v-model="dialogVisible" width="70%" top="10vh" append-to-body>
      <!-- 搜索区域 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="客户编码" prop="code">
          <el-input v-model="queryParams.code" placeholder="请输入客户编码" clearable @keyup.enter="handleQuery"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable @keyup.enter="handleQuery"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 客户表格 -->
      <el-table border v-loading="loading" :data="customerList" highlight-current-row height="300px"
        @current-change="handleSelect" :row-key="row => row.id">
        <el-table-column label="客户编码" align="center" prop="code" />
        <el-table-column label="客户名称" align="center" prop="name" show-overflow-tooltip />
        <el-table-column label="客户分类" align="center" prop="categoryName" />
        <el-table-column label="启用状态" align="center" prop="customerStatus">
          <template #default="scope">
            <dict-tag :options="sys_enable" :value="scope.row.customerStatus" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelect" :disabled="!selected">
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { listCustomer } from '@/api/finance/customer'

const customerId = defineModel<number | string>('customerId')
const customerName = defineModel<string>('customerName')

watch(customerId, (val) => {
  if (!val) {
    customerName.value = ''
    selected.value = null
  }
})


// 弹窗状态
const dialogVisible = ref(false)
const loading = ref(false)
const customerList = ref([])
const total = ref(0)
const selected = ref(null)

// 查询条件
const queryParams = ref({
  pageNum: 1,
  pageSize: 50,
  code: '',
  name: '',
  customerStatus: 1
})

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_enable } = proxy.useDict('sys_enable')

// 获取客户列表
const getList = async () => {
  loading.value = true
  try {
    const res = await listCustomer(queryParams.value)
    customerList.value = res.rows || []
    total.value = res.total || 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 50,
    code: '',
    name: '',
    customerStatus: 1
  }
  handleQuery()
}

// 单选
const handleSelect = row => {
  selected.value = row
}

// 确认选择
const confirmSelect = () => {
  if (selected.value) {
    customerId.value = selected.value.id // 对外传 customerId
    customerName.value = selected.value.name // 内部展示客户名称
    dialogVisible.value = false
  }
}

// 打开弹窗
const openDialog = async () => {
  await getList()
  dialogVisible.value = true
}

// 清除选择
const clearCustomer = () => {
  customerId.value = null
  customerName.value = ''
  selected.value = null
}
</script>
